<script>
import audio from "../../../components/audio.vue"
import { valIsEmpty } from "../../../utils"
import persistence from "@/store/persistence"
import { getNginxUrl } from "@/utils/settings"

export default {
  name: "chineseEnglishExchange",
  components: { audio },
  props: {
    wordInfo: {
      type: Object,
      default() {
        return null
      },
    },
    //可选值：中考英、英考中
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      renderOptionList: [],
    }
  },
  methods: {
		getNginxUrl,
    valIsEmpty,
		setOptionList(val){
			this.renderOptionList = val.map((item) => {
				return {
					...item,
					isCorrect: "",
				}
			})
		},
    optionSelect(item) {
      //判断是否是正确答案
      if (item.wordId === this.wordInfo.wordId) {
        item.isCorrect = "correct"
        this.$emit("select", true)
      } else {
        item.isCorrect = "inCorrect"
        this.$emit("select", false)
      }
    },
		//播放音频读音
		playAudio() {
			this.$refs.audio.play()
		},
  },
  emits: ["select"],
  inject: ["root"],
  created() {
    this.root && (this.root.wordPracticeComponentInstance = this)
  },
}
</script>

<template>
  <view class="component" v-if="wordInfo">
    <!--			单词英文-->
    <view class="title" v-if="type === '英考中'">{{ wordInfo.enWord }}</view>
    <!--			单词中文-->
    <view class="title" v-else-if="type === '中考英'">{{ wordInfo.znWord }}</view>
    <!--			音标-->
    <view class="phonetic">
      <audio :text="wordInfo.phonetic" :audio-src="wordInfo.wordAudioUrl ? getNginxUrl() + wordInfo.wordAudioUrl : ''" ref="audio"></audio>
    </view>
    <!--		例句 且长度不小于75展示-->
    <view class="enSentence" v-if="type === '英考中' && !valIsEmpty(wordInfo.enSentence) && wordInfo.enSentence.length < 75">{{
      wordInfo.enSentence
    }}</view>
    <!--		选项列表-->
    <view class="option-list">
      <block v-for="(item, index) in renderOptionList" :key="index">
        <!--				还未选中状态-->
        <view v-if="!item.isCorrect" class="option-item" @click="optionSelect(item)">
          <text v-if="type === '英考中'">{{ item.znWord }}</text>
          <text v-else-if="type === '中考英'">{{ item.enWord }}</text>
        </view>
        <!--				正确-->
        <view v-else-if="item.isCorrect === 'correct'" class="option-item correct">
          <text v-if="type === '英考中'">{{ item.znWord }}</text>
          <text v-else-if="type === '中考英'">{{ item.enWord }}</text>
        </view>
        <!--				错误-->
        <view v-else-if="item.isCorrect === 'inCorrect'" class="option-item inCorrect">
          <view class="inCorrect-item">
            <text v-if="type === '英考中'">{{ item.znWord }}</text>
            <text v-else-if="type === '中考英'">{{ item.enWord }}</text>
          </view>
          <!--					该选项的正确答案-->
          <view class="inCorrect-item">
            <text v-if="type === '英考中'">选项对应：{{ item.enWord }}</text>
            <text v-else-if="type === '中考英'">选项对应：{{ item.znWord }}</text>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  display: flex;
  align-items: center;
  flex-direction: column;

  > .title {
    margin-top: 150rpx;
    font-size: 48rpx;
    font-weight: bold;
    color: var(--text-color);
    max-width: 80vw;
    text-align: center;
  }

  .phonetic {
    margin-top: 20rpx;
  }

  .enSentence {
    font-size: 32rpx;
    color: var(--text-color-light);
    margin-top: 30rpx;
    width: 80%;
    align-items: center;
    //文本溢出部分自动换行
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .option-list {
    width: 80%;
    padding-top: 70rpx;

    .option-item {
      --local-border-color: var(--border-color);
      --local-text-color: var(--text-color);
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: 32rpx;
      color: var(--local-text-color);
      border-radius: 50rpx;
      padding: 30rpx;
      border: 4rpx solid var(--local-border-color);
      margin-bottom: 30rpx;
      height: max-content;

      &.correct {
        --local-text-color: #00a15c;
        --local-border-color: #00a15c;
      }

      &.inCorrect {
        --local-text-color: #e43d33;
        --local-border-color: #e43d33;
        padding: 10rpx;
        font-size: 30rpx;
      }
    }
  }
}
</style>
